<template>
<div id="manage">
	
	<!-- 添加或修改对话框 -->
	<el-dialog :title="operateType === 'add' ? '新增字典' : '更新字典'" :visible.sync="isShow" width="600px" append-to-body>
	   <el-form :model="operateForm" :rules="rules" ref="form" label-width="90px">
	      <el-row>
	         <el-col :span="24">
				 <el-form-item label="字典名称" prop="dictName">
				    <el-input v-model="operateForm.dictName" placeholder="请输入字典名称" maxlength="30" />
				 </el-form-item>
	         </el-col>
	      </el-row>
	      <el-row>
	         <el-col :span="24">
	            <el-form-item label="字典类型" prop="dictType">
	               <el-input v-model="operateForm.dictType" placeholder="请输入字典类型" maxlength="30" />
	            </el-form-item>
	         </el-col>
	      </el-row>			
	      <el-row>
			 <el-col :span="24">
			    <el-form-item label="备注">
			       <el-input v-model="operateForm.remark" type="textarea" placeholder="请输入内容"></el-input>
			    </el-form-item>
			 </el-col>
	      </el-row>		
	   </el-form>
	   <template #footer>
	      <div class="dialog-footer">
	         <el-button type="primary" @click="confirm">确 定</el-button>
	         <el-button @click="isShow = false">取 消</el-button>
	      </div>
	   </template>
	</el-dialog>
	
	<div class="manage-header">
		<el-form style="width: 100%;" label-width="100px" :model="queryParams" ref="sform" inline>
			<el-button type="primary" @click="addHandler">+ 新增</el-button>
			<div style="float: right;">
				<el-form-item label="字典名称" prop="dictName">
				  <el-input
				    v-model="queryParams.dictName"
				    placeholder="请输入字典名称"
				    clearable
				    style="width: 240px"
				    @keyup.enter.native="handleQuery"
				  />
				</el-form-item>
				<el-form-item label="字典类型" prop="dictType">
					<el-input
					  v-model="queryParams.dictType"
					  placeholder="请输入字典类型"
					  clearable
					  style="width: 240px"
					  @keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-button  type="primary" @click="getList(queryParams.dictName,queryParams.dictType)">搜索</el-button>
			</div>
		</el-form>
	</div>
	
	<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="字典编号" align="center" prop="dictId" min-width="20%"/>
      <el-table-column label="字典名称" align="center" prop="dictName"  min-width="20%" :show-overflow-tooltip="true" />
	  <el-table-column label="字典类型" align="center" prop="dictType"  min-width="20%" :show-overflow-tooltip="true" >
		  <template slot-scope="scope">
			<a href="#"><span @click="clickMenu(scope.row)">{{ scope.row.dictType }}</span></a>
		  </template>
	  </el-table-column>
	  <el-table-column label="创建时间" align="center" prop="createTime"  min-width="20%" :show-overflow-tooltip="true" />	  
	  <el-table-column label="操作"  min-width="20%">
			<template slot-scope="scope">
				<el-button size="mini" @click="editHandler(scope.row)">编辑</el-button>
				<el-button size="mini" type="danger" @click="delHandler(scope.row)">删除</el-button>
			</template>
	  </el-table-column>
    </el-table>
		<el-pagination class="pager" layout="total, prev, pager, next, jumper" align="center"
		:total="config.total" :page-sizes="[10,20,100]" :current-page.sync="config.page" 
		@current-change="getList()" :page-size="config.size"></el-pagination>

</div>
</template>
<script>
import { listType, getType, delType, addType, updateType, refreshCache } from "/api/dicttype";
export default {
  name: 'Dict',
  data () {
    return {
	  operateType: 'add',
	  isShow: false,
	  operateForm:{
	  	dictName: '',
	  	dictType: '',
	  	remark: '',
	  },
	  loading: true,
      showSearch: true,
	  queryParams: {
	    pageNum: 1,
	    pageSize: 10,
	    dictName: undefined,
	    dictType: undefined,
	  },
	  config: {
	  	page: 1,
	  	size: 10,
	  	total: 30
	  },
	  typeList: [],
	  // 表单校验
	  rules: {
	    dictName: [
	      { required: true, message: "字典名称不能为空", trigger: "blur" },
	    ],
	    dictType: [
	      { required: true, message: "字典类型不能为空", trigger: "blur" },
	    ],
	  },
	  
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询字典类型列表 */
    getList(dictName='' , dictType='') {
      this.loading = true;
      listType({
				pageNum: this.config.page,
				pageSize: this.config.size,
				dictName,
				dictType
		}).then(res => {
			let data = res.data
          this.typeList = data.rows;
          this.config.total = data.total
          this.loading = false;
        }
      );
    },
	confirm(){
		this.$refs["form"].validate(valid=>{
			if (valid){
				if(this.operateType === 'edit'){
					updateType(this.operateForm).then(res => {
						this.isShow=false
						this.getList()
					})
				}
				else{
					addType(this.operateForm).then(res => {
						this.isShow=false
						this.getList()
					})
				}
			}
		})
	},
	
	handleSelectionChange(selection) {
	  // this.ids = selection.map(item => item.dictId)
	},
	addHandler(){
		this.isShow = true
		this.operateType = 'add'
		this.operateForm = {
			dictName: '',
			dictType: '',
			remark: ''
		}
	},
	editHandler(row){
		this.operateType = 'edit'
		this.isShow = true
		this.operateForm = row
	},
	handleQuery() {
	  this.queryParams.pageNum = 1;
	  this.getList();
	},
	delHandler(row){
		this.$confirm("此操作将永久删除该字典，是否继续？", "提示",{
			confirmButtonText: "确认",
			cancelButtonText: "取消",
			type: "warning"
		}).then(()=>{
			const id = row.dictId
			delType(id).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功'
				})
				this.getList()
			})
		})
	},
	clickMenu(item){
		let tar = {name:'dictdata',label:'字典数据'}
		  this.$router.push({
			  name: tar.name,
			  path: '/dictdata/index',
			  params: {dictType: item.dictType}
		  })
		  this.$store.commit('selectMenu', tar)
	},
	
  }
}
</script>